<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('仪表盘')}"></head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{fragments/layout :: navbar}"></nav>
    
    <!-- 页面内容 -->
    <div th:replace="~{fragments/layout :: content(~{::main})}">
        <main>

            
            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-title">图书总数</h6>
                                    <h2 class="mb-0" th:text="${bookCount}">0</h2>
                                </div>
                                <i class="fas fa-book fa-3x opacity-50"></i>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                            <a th:href="@{/books}" class="text-white text-decoration-none">
                                查看详情 <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-title">用户总数</h6>
                                    <h2 class="mb-0" th:text="${userCount}">0</h2>
                                </div>
                                <i class="fas fa-users fa-3x opacity-50"></i>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0" th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">
                            <a th:href="@{/admin/users}" class="text-white text-decoration-none">
                                查看详情 <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-title">当前借阅</h6>
                                    <h2 class="mb-0" th:text="${activeLoansCount}">0</h2>
                                </div>
                                <i class="fas fa-bookmark fa-3x opacity-50"></i>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                            <a th:href="${#authorization.expression('hasRole(''ROLE_ADMIN'')')} ? @{/loans/admin/all-loans} : @{/loans/my}" class="text-white text-decoration-none">
                                查看详情 <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-danger text-white h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-title">逾期借阅</h6>
                                    <h2 class="mb-0" th:text="${overdueLoansCount}">0</h2>
                                </div>
                                <i class="fas fa-exclamation-triangle fa-3x opacity-50"></i>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0" th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">
                            <a th:href="@{/loans/admin/overdue}" class="text-white text-decoration-none">
                                查看详情 <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最近活动和图表 -->
            <div class="row">
                <!-- 最近借阅 -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">最近借阅</h5>
                        </div>
                        <div class="card-body">
                            <div th:if="${#lists.isEmpty(recentLoans)}" class="text-center py-4">
                                <p class="text-muted mb-0">暂无借阅记录</p>
                            </div>
                            <div class="list-group list-group-flush" th:unless="${#lists.isEmpty(recentLoans)}">
                                <div class="list-group-item" th:each="loan : ${recentLoans}">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">
                                            <a th:href="@{/books/view/{id}(id=${loan.book.id})}" class="text-decoration-none" th:text="${loan.book.title}">图书标题</a>
                                        </h6>
                                        <small th:text="${#temporals.format(loan.borrowDate, 'yyyy-MM-dd')}">2023-01-01</small>
                                    </div>
                                    <p class="mb-1">
                                        <span th:text="'借阅者: ' + ${loan.user.name}">借阅者</span>
                                    </p>
                                    <small>
                                        <span th:if="${loan.status == 'BORROWED'}" class="badge bg-primary">借阅中</span>
                                        <span th:if="${loan.status == 'RETURNED'}" class="badge bg-success">已归还</span>
                                        <span th:if="${loan.status == 'OVERDUE'}" class="badge bg-danger">已逾期</span>
                                        <span th:if="${loan.status == 'BORROWED'}" th:text="'应还日期: ' + ${#temporals.format(loan.dueDate, 'yyyy-MM-dd')}">应还日期</span>
                                        <span th:if="${loan.status == 'RETURNED'}" th:text="'归还日期: ' + ${#temporals.format(loan.returnDate, 'yyyy-MM-dd')}">归还日期</span>
                                    </small>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-white">
                            <a th:href="${#authorization.expression('hasRole(''ROLE_ADMIN'')')} ? @{/loans/admin/all-loans} : @{/loans/my}" class="btn btn-sm btn-outline-primary">
                                查看所有借阅 <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 最新图书 -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">最新图书</h5>
                        </div>
                        <div class="card-body">
                            <div th:if="${#lists.isEmpty(latestBooks)}" class="text-center py-4">
                                <p class="text-muted mb-0">暂无图书</p>
                            </div>
                            <div class="row row-cols-1 row-cols-md-2 g-3" th:unless="${#lists.isEmpty(latestBooks)}">
                                <div class="col" th:each="book : ${latestBooks}">
                                    <div class="card h-100 border-0 shadow-sm">
                                        <div class="card-body">
                                            <h6 class="card-title">
                                                <a th:href="@{/books/view/{id}(id=${book.id})}" class="text-decoration-none" th:text="${book.title}">图书标题</a>
                                            </h6>
                                            <p class="card-text small text-muted" th:text="${book.author}">作者</p>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <span class="badge bg-secondary" th:text="${book.category}">分类</span>
                                                <small th:text="${book.publicationYear}">出版年份</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-white">
                            <a th:href="@{/books}" class="btn btn-sm btn-outline-primary">
                                浏览所有图书 <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 快速链接 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">快速链接</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <a th:href="@{/books}" class="btn btn-outline-primary w-100 py-3">
                                        <i class="fas fa-book fa-2x mb-2"></i>
                                        <div>浏览图书</div>
                                    </a>
                                </div>
                                <div class="col-md-3">
                                    <a th:href="@{/books/search}" class="btn btn-outline-success w-100 py-3">
                                        <i class="fas fa-search fa-2x mb-2"></i>
                                        <div>搜索图书</div>
                                    </a>
                                </div>
                                <div class="col-md-3" th:unless="${#authorization.expression('hasRole(''ROLE_ADMIN'')') == true}">
                                    <a th:href="@{/loans/my}" class="btn btn-outline-info w-100 py-3">
                                        <i class="fas fa-list-alt fa-2x mb-2"></i>
                                        <div>我的借阅</div>
                                    </a>
                                </div>
                                <div class="col-md-3">
                                    <a th:href="@{/profile}" class="btn btn-outline-secondary w-100 py-3">
                                        <i class="fas fa-user fa-2x mb-2"></i>
                                        <div>个人资料</div>
                                    </a>
                                </div>
                                <!-- 负载均衡测试链接 -->
                                <div class="col-md-3">
                                    <a th:href="@{/load-balancer-test}" class="btn btn-outline-warning w-100 py-3">
                                        <i class="fas fa-random fa-2x mb-2"></i>
                                        <div>负载均衡测试</div>
                                    </a>
                                </div>
                                <!-- 管理员链接 -->
                                <div class="col-md-3" th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">
                                    <a th:href="@{/books/admin/add}" class="btn btn-outline-dark w-100 py-3">
                                        <i class="fas fa-plus-circle fa-2x mb-2"></i>
                                        <div>添加图书</div>
                                    </a>
                                </div>
                                <div class="col-md-3" th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">
                                    <a th:href="@{/admin/users}" class="btn btn-outline-dark w-100 py-3">
                                        <i class="fas fa-users-cog fa-2x mb-2"></i>
                                        <div>用户管理</div>
                                    </a>
                                </div>
                                <div class="col-md-3" th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">
                                    <a th:href="@{/loans/admin/all-loans}" class="btn btn-outline-dark w-100 py-3">
                                        <i class="fas fa-clipboard-list fa-2x mb-2"></i>
                                        <div>借阅管理</div>
                                    </a>
                                </div>
                                <div class="col-md-3" th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">
                                    <a th:href="@{/loans/admin/overdue}" class="btn btn-outline-danger w-100 py-3">
                                        <i class="fas fa-exclamation-circle fa-2x mb-2"></i>
                                        <div>逾期管理</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer th:replace="~{fragments/layout :: footer}"></footer>
    
    <!-- 脚本 -->
    <div th:replace="~{fragments/layout :: scripts}"></div>
</body>
</html>
